import { Descriptions } from 'antd';
import { useMemo } from 'react';
import { DetailType } from '.';
const DriveTable: React.FC<DetailType> = (props) => {
  const badDrivingHabits = useMemo(() => {
    return { ...props.badDrivingHabits };
  }, [props.badDrivingHabits]);
  const activeSafety = useMemo(() => {
    return { ...props.activeSafety };
  }, [props.activeSafety]);
  const speedDependent = useMemo(() => {
    return { ...props.speedDependent };
  }, [props.speedDependent]);

  return (
    <div className="ym-descr-less">
      <Descriptions
        title={false}
        layout="vertical"
        bordered
        style={{ padding: '16px 0' }}
        size="small"
        column={badDrivingHabits.factorList.length + 2}
      >
        <Descriptions.Item label="项目">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-end" style={{ minWidth: 60 }}>
              得分
            </div>
          </div>
        </Descriptions.Item>
        {badDrivingHabits.factorList.map((item, index) => {
          return (
            <Descriptions.Item label={`${item.factorName}(${item.maxScore})`} key={index}>
              <div className="ym-desc-item max-item">
                <div className="ym-desc-itemson ym-desc-item-end">{item.score}</div>
              </div>
            </Descriptions.Item>
          );
        })}
        <Descriptions.Item label="驾驶陋习合计">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-end lingt_text">{badDrivingHabits.totalScore || 0}</div>
          </div>
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title={false}
        layout="vertical"
        bordered
        style={{ padding: '16px 0' }}
        size="small"
        column={activeSafety.factorList.length + 2}
      >
        <Descriptions.Item label="项目">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-end" style={{ minWidth: 60 }}>
              得分
            </div>
          </div>
        </Descriptions.Item>
        {activeSafety.factorList.map((item, index) => {
          return (
            <Descriptions.Item label={`${item.factorName}(${item.maxScore})`} key={index}>
              <div className="ym-desc-item max-item">
                <div className="ym-desc-itemson ym-desc-item-end">{item.score}</div>
              </div>
            </Descriptions.Item>
          );
        })}
        <Descriptions.Item label="主动安全相关合计">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-end lingt_text">{activeSafety.totalScore || 0}</div>
          </div>
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title={false}
        layout="vertical"
        bordered
        style={{ padding: '16px 0' }}
        size="small"
        column={speedDependent.factorList.length + 2}
      >
        <Descriptions.Item label="项目">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-end" style={{ minWidth: 60 }}>
              得分
            </div>
          </div>
        </Descriptions.Item>
        {speedDependent.factorList.map((item, index) => {
          return (
            <Descriptions.Item label={`${item.factorName}(${item.maxScore})`} key={index}>
              <div className="ym-desc-item max-item">
                <div className="ym-desc-itemson ym-desc-item-end">{item.score}</div>
              </div>
            </Descriptions.Item>
          );
        })}
        <Descriptions.Item label="速度相关合计">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-end lingt_text">{speedDependent.totalScore || 0}</div>
          </div>
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
};
export default DriveTable;
